<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> -->
    <script src="/static/jquery-3.4.1.min.js"></script>
</head>

<body>
    {% if mess != '还未登陆' %}
    <div class="contain">
        <div>上传选择你要上传的音频和视频,文件必须是音频和视频，且小于100M</div>
        <form id=myForm>
            <input type="file" name='myfile' id='myfile'>
        </form>

        <div class="progress">
            <div></div>
        </div>
        <br><br>
        <button id='btn' onclick="uploadFile()">上传</button>
    </div>
    {% endif %}
    <div class='tips'>
        <p id='p'>{{ mess }}</p>
    </div>
</body>
<script>
    var type = '';
    var url = '{{ myhost }}' + '/upload_file';
    var myXhr;
    $('#btn').hide();
    var file = $('#myfile');
    aim = $('#p');
    var right = false; // 是否可以提交

    function uploadFile() {
        console.log($('#myfile'));
        var file = $('#myfile').get(0).files[0];
        var formdata = new FormData();
        formdata.append('myfile', file);
        formdata.append('userID', '{{userID}}');
        formdata.append('type', type);
        console.log('准备上传：' + type);
        $.ajax({
            url: url,
            async: true,
            type: 'post',
            data: formdata, // 内容是表单
            dataType: 'json', //  希望的返回类型
            processData: false,
            contentType: 'multipart/form-data', // 上传文件必须是这个
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            xhr: function() {
                myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) { // check if upload property exists
                    myXhr.upload.addEventListener('progress', function(e) {
                        var loaded = e.loaded; //已经上传大小情况 
                        var total = e.total; //附件总大小 
                        var percent = Math.floor(100 * loaded / total) + "%"; //已经上传的百分比  
                        $(".progress > div").css("width", percent);
                    }, false);
                }
                return myXhr;
            },
            success: function(data) {
                if (data.mess && data.mess == 'ok')
                    aim.text('上传成功');
                else {
                    aim.text('上传失败');
                }
                setTimeout(() => {
                    $(".progress > div").css("width", '0%');
                    $('#btn').hide();
                    document.getElementById("myForm").reset();
                }, 1500);
            },
            error: function(e) {
                aim.text('上传失败');
                console.log(e);
            }
        });
    }

    file.on('change', function(e) {
        var name = e.currentTarget.files[0].name;
        var size = e.currentTarget.files[0].size;
        type = e.currentTarget.files[0].type;
        var li = [''];
        if (type.length > 5) {
            li = type.split('/');
            type = li[0];
            if (type == 'video' || type == 'audio') {
                right = true;
                $("#type").val(type);
                if (size > 104857600) {
                    aim.text('文件要小于100MB');
                    right = false;
                } else {
                    right = true;
                }
            } else {
                aim.text('必须是音频和视频');
                right = false;
            }
        } else {
            aim.text('文件必须是音频和视频，且小于100M')
            right = false;
        }

        if (!right) {
            $('#btn').hide();
        } else {
            $('#btn').show();
            aim.text('该文件可以上传,大小:' + (size / 1024 / 1024).toFixed(2) + 'MB');
        }
        console.log(name + '-' + size + '-' + type);
    });
</script>

<style>
    html,
    body {
        width: 97%;
        height: 100%;
        overflow: hidden;
    }
    
    .contain {
        width: 100%;
    }
    
    .tips {
        width: 100%;
        font-size: 24px;
        background-color: burlywood;
    }
    
    button {
        width: 92%;
        /* width: 12rem; */
        height: 3rem;
        background-color: yellowgreen;
    }
    
    input {
        font-size: 1.5rem;
        line-height: 1.5rem;
        width: 100%;
    }
    
    .progress {
        width: 98%;
        height: 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
        margin: 10px 0px;
        overflow: hidden;
    }
    
    .progress>div {
        width: 0%;
        height: 100%;
        background-color: yellowgreen;
        transition: all .3s ease;
    }
</style>

</html>